<template>
  <div class="home">

    <l-banner :items='banners' />
    
    <div class="home-content">
      
        <div class="car-list">
          
          <l-car-main-list />
        </div>
        
        <div class="serve-content">
          <div class="level-header">
              <h1 class="title">
                  汽车服务
              </h1>
          </div>
          <l-car-serve-main-list />
        </div>
        
    </div>
    
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import Banner from '@/components/carousel/index.vue';
import IBannerItem from '@/components/carousel/index.vue';
import Level from '@/components/level/index.vue';
import CarServeMainList from '@/components/car_serve_main_list/index.vue';
import CarMainList from '@/components/car_main_list/index.vue';


@Component({
    components: {

      'l-banner': Banner,
      'l-level': Level,
      'l-car-serve-main-list': CarServeMainList,
      'l-car-main-list': CarMainList
      
    }
})
export default class Home extends Vue {


  banners = [

    {
      path: '/',
      imgUrl: 'https://image.guazistatic.com/gz01180117/17/52/4985094adcba37aa0854ce02bf8d4695.jpg@base@tag=imgScale',
    },
    {
      path: '/',
      imgUrl: 'https://image.guazistatic.com/gz01180223/10/39/ddf0c443b056b12d5eaf4db6f3bcd9ae.png@base@tag=imgScale'
    }
    
  ]
  
}

</script>
<style lang="less">

.home{
  min-height: 100%;
}

.home-content{
  padding-bottom: 60*@rem;
  .max-page-width();

  .car-item{
    padding-bottom: 10*@rem;
  }


}

.level-header{
  padding: 20*@rem 0;
  border-bottom: 4*@rem solid @mainColor;
  
  .title{
    font-size: 26*@rem;
    font-weight: 600;
    color: @mainColor;
  }
  
}

</style>
